<template>
  <div class="container">
    <div :class="{'hideUploadCard': isHideUploadCard, 'isEdit': !isEdit}">
      <el-upload
        :action="`${VUE_APP_API}/jcdSys/jcdDataUpload/fileUpload`"
        :data="dataObj"
        list-type="picture-card"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        :on-success="handleUploadSuccess"
        :on-preview="handlePreview"
        :limit="maxCount"
        :on-exceed="handleExceed"
        :disabled="!isEdit"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" :modal="false">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import { ossUpload } from '@/api/oss'
const VUE_APP_API = process.env.VUE_APP_API
// const VUE_APP_API = 'http://192.168.1.82:9999'
const VUE_APP_FILE = process.env.VUE_APP_FILE

export default {
  name: 'MultiUpload',
  props: {
    // 图片属性数组
    value: {
      type: String,
      default: ''
    },
    // 最大上传图片数量
    maxCount: {
      type: Number,
      default: 1
    },
    maxSize: {
      type: Number,
      default: null
    },
    // 是否可编辑
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      VUE_APP_API,
      dataObj: {},
      dialogVisible: false,
      dialogImageUrl: null,
      isHideUploadCard: false
    }
  },
  computed: {
    fileList() {
      if (this.value) {
        let arr = this.value.split(',')
        if (arr.length > this.maxCount) {
          arr.length = this.maxCount
        }
        const fileList = []
        for (let i = 0; i < arr.length; i++) {
          fileList.push({ url: VUE_APP_FILE + arr[i] })
        }
        // 图片到达最大显示时候，隐藏上传的按钮图
        this.isHideUploadCard = arr.length >= this.maxCount
        return fileList
      } else {
        this.isHideUploadCard = false
        return []
      }
    }
  },
  methods: {
    emitInput(fileList) {
      const value = []
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url.replace(VUE_APP_FILE, ''))
      }
      this.$emit('input', value.join(','))
    },
    handleRemove(file, fileList) {
      this.emitInput(fileList)
    },
    handlePreview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    beforeUpload(file) {
      if (this.maxSize) {
        const fileLength = (file.size / 1024 / 1024).toFixed(2)
        if (fileLength > this.maxSize) {
          this.$message({
            message:
              '上传图片大小超过' +
              this.maxSize +
              'M，此图片大小为' +
              fileLength +
              '，请重新选择图片',
            type: 'error',
            duration: 3000
          })
          return false
        }
      }
      file.name.replace(',', '')
    },
    handleUploadSuccess(res, file) {
      this.fileList.push({
        name: file.name,
        url: VUE_APP_FILE + res.data
      })
      this.emitInput(this.fileList)
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多只能上传' + this.maxCount + '张图片',
        type: 'warning',
        duration: 3000
      })
    }
  }
}
</script>
<style scoped>
.hideUploadCard >>> .el-upload {
  display: none !important;
}
.isEdit >>> .el-upload {
  display: none;
}
.container >>> .v-modal {
  display: none !important;
}
::v-deep .el-upload--picture-card{
  width: 120px !important;
  height: 120px !important;
  line-height: 120px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item{
  width: 120px !important;
  height: 120px !important;
}
</style>

